<template>
  <div class="server">
    <div class="header">
      <table>
        <tr>
          <td colspan="12">
            <el-button
              type="success"
              size="small"
              @click="sendServer()"
              icon="el-icon-plus"
            >
              新建服务器组
            </el-button>
          </td>
        </tr>
      </table>
    </div>
    <div class="content">
      <el-main style="margin-top: 60px" v-loading="loading">
        <el-table
          class="table"
          border
          :fit="true"
          :header-cell-style="{
            color: '#333',
            fontFamily: 'MicrosoftYaHeiUI',
            fontWeight: 500,
            fontSize: '16px',
          }"
          :data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)"
        >
          <el-table-column
            prop="serverGroupId"
            sortable
            label="服务器组ID"
          ></el-table-column>
          <el-table-column
            prop="serverGroupName"
            sortable
            label="服务器组名称"
          ></el-table-column>
          <el-table-column
            prop="serverId"
            sortable
            label="服务器Id"
          ></el-table-column>
          <el-table-column prop="enabled" sortable label="服务器状态">
            <template slot-scope="scope">
              <span v-if="scope.row.enabled == false" style="color: red">
                已禁用
              </span>
              <span v-if="scope.row.enabled" style="color: green">
                已启用
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="dialogEdit(scope.row)"
              >查看/编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                v-if="scope.row.enabled"
                @click="Disable(scope.row)"
              >禁用</el-button>
              <el-button
                size="mini"
                v-if="scope.row.enabled == false"
                type="success"
                @click="Enable(scope.row)"
              >启用</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pageNation
          :total="tableData.length"
          :page-size="pageSize"
          @pageChange="pageChange"
          :page_index="currentPage"
        />
      </el-main>
      <ServerGroupDialog
        :dialog="dialog"
        :ServerGroupForm="ServerGroupForm"
        @saveServerGroup="getfileMsg($event)"
      />
    </div>
  </div>
</template>
<script>
import ServerGroupDialog from "../../components/gmtool/ServerGroupDialog";
import pageNation from "../../components/pagenation/pageNation";
import { getTime } from "../../utils/index";
export default {
  name: "Server",
  components: { ServerGroupDialog, pageNation },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      loading: false,
      ServerGroupForm: {
        id: "",
        serverGroupId: "",
        serverGroupName: "",
        serverId: "",
      },
      dialog: {
        show: false,
        title: "",
        option: "edit",
      },
    };
  },
  mounted() {
    this.getServerGroupMsg();
  },
  methods: {
    //获取服务器组列表信息
    getServerGroupMsg() {
      var serverGroupArr = [];
      this.loading = true;
      this.$http.get("/api/gmtool/getServerGroup").then((res) => {
        if (res.data.code == 200) {
          res.data.result.forEach((item) => {
            let obj = {
              serverGroupId: item.serverGroupId,
              serverGroupName: item.serverGroupName,
              serverId: item.serverIds.toString(),
              enabled: item.enabled,
            };
            serverGroupArr.push(obj);
          });
          this.tableData = serverGroupArr;
          this.loading = false;
        } else {
          this.$message({ type: "warning", message: "没有对应的数据" });
          this.loading = false;
        }
      });
    },
    //分页
    pageChange(item) {
      this.currentPage = item.page_index;
      this.pageSize = item.page_limit;
    },
    //查看编辑
    dialogEdit(row) {
      this.dialog = {
        show: true,
        title: "编辑服务器组",
        option: "edit",
      };
      this.ServerGroupForm.id = row.serverGroupId;
      this.ServerGroupForm.serverGroupId = row.serverGroupId;
      this.ServerGroupForm.serverGroupName = row.serverGroupName;
      this.ServerGroupForm.serverId = row.serverId;
    },
    //禁用
    Disable(row) {
      this.$confirm("确定禁用服务器组吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          this.$http.post("/api/gmtool/disableServerGroup", {
              serverGroupId: row.serverGroupId,
              user_actions: `禁用服务器组id为${row.serverGroupId}的服务器组`,
              date: getTime(new Date()),
          }).then((res) => {
              if (res.data.code == 200) {
                this.$message.success(res.data.msg);
                this.getServerGroupMsg();
              }
          });
      }).catch(() => {
          return;
      });
    },
    //启用
    Enable(row) {
      this.$confirm("确定启用服务器组吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http.post("/api/gmtool/enableServerGroup", {
              serverGroupId: row.serverGroupId,
              user_actions: `启用服务器组id为${row.serverGroupId}的服务器组`,
              date: getTime(new Date()),
        }).then((res) => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              this.getServerGroupMsg();
            }
        });
      }).catch(() => {
          return;
      });
    },
    //新增服务器组
    sendServer() {
      this.dialog = {
        show: true,
        title: "新建服务器组",
        option: "add",
      };
      this.ServerGroupForm.serverGroupId = "";
      this.ServerGroupForm.serverGroupName = "";
      this.ServerGroupForm.serverId = "";
    },
    //获取弹出层的数据
    getfileMsg(server) {
      if(this.dialog.option == "add"){
        this.$http.post(`/api/gmtool/addServerGroup`, {
            user_actions: `添加服务器组信息`,
            date: getTime(new Date()),
            serverGroupId: server.serverGroupId,
            serverGroupName: server.serverGroupName,
            serverIds: server.serverIds,
        }).then((res) => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              this.getServerGroupMsg();
            } else {
              this.$message({ type: "warning", message: res.data.msg });
            }
        });
      }else{
          this.$http.post(`/api/gmtool/updServerGroup/${server.id}`, {
            user_actions: `编辑服务器组`,
            date: getTime(new Date()),
            serverGroupId: server.serverGroupId,
            serverGroupName: server.serverGroupName,
            serverIds: server.serverIds,
          }).then((res) => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              this.getServerGroupMsg();
            } else {
              this.$message({ type: "warning", message: res.data.msg});
            }
         });
      }    
    },
  },
};
</script>
<style scoped>
.server {
  width: 100%;
  height: auto;
  background-color: #fff;
}
.server td {
  padding: 18px;
  font-size: 14px;
  display: flex;
  float: left;
  position: absolute;
  right: 30px;
}
</style>